<template>
	<view>
		<view class="header borderBottom1">
			<view @click="selectd(index)" class="tabs" :class="index == current ? 'selectdTabs' : ''" v-for="(item, index) in tabs" :key="index">{{ item }}</view>
		</view>
		<view class="line"></view>
		<u-empty text="订单为空" mode="order" :show="orderFlag"></u-empty>
		<view class="container" v-show="!orderFlag">
			<view v-show="current == 0" class="order borderBottom10" @click="orderDetailHandle(item, index)" v-for="(item, index) in list" :key="'a' + index">
				<view class="order_header">
					<text>订单：{{ item.ordernumber }}</text>
					<!-- <text>{{ item.state == 1 ? '待付款' : item.state == 2 ? '待使用' : item.state == 3 ? '待评价' : '已评价' }}</text> -->
					<text>{{ item.statusname }}</text>
				</view>
				<view class="order_content">
					<view>教练:{{ item.coachname }}</view>
					<view class="">
						联系电话:{{item.coachphone}}
					</view>
					<view>科目:{{ item.subjectstitle }}</view>
					<view>预约时间:{{ item.yuyuedate }} {{ item.yuyuetime == 'am' ? '上午' : '下午' }} {{item.starthour+'点-'+item.endhour+'点'}}</view>
				</view>
				<view class="order_peopleNumber" v-if="item.lastnumber">
					<text>{{item.lastnumber}}</text>
				</view>
				<view class="order_footer">
					<text>{{ item.createtime }}</text>
					<view>
						<text>￥</text>
						<text>{{ item.money }}</text>
					</view>
				</view>
				<view class="order_state" v-if="item.cancelstatus || item.commentstatus || item.refundstatus || item.gopaystatus || item.hexiaostatus || item.deletestatus">
					<view @click.stop="deleteHandle(item)" style="border-color: #ff4040;color: #ff4040;" class="order_state_refund" v-if="item.deletestatus">删除订单</view>
					<view @click.stop="cancelHandle(item)" class="order_state_refund" v-if="item.cancelstatus">取消订单</view>
					<view @click.stop="commentHandle(item)" class="order_state_refund" v-if="item.commentstatus">评价</view>
					<view @click.stop="refund(item)" class="order_state_pay" v-if="item.refundstatus">退款</view>
					<view @click.stop="payHandle(item)" class="order_state_pay" v-if="item.gopaystatus">付款</view>
					<view @click.stop="hexiaoHandle(item)" class="order_state_pay" v-if="item.hexiaostatus">
						<image src="../../../static/img/personCenter/QRcode.png" mode=""></image>
						核销码
					</view>
				</view>
			</view>
			<view v-show="current == 1" class="order borderBottom10" @click="orderDetailHandle(item, index)" v-for="(item, index) in list" :key="'b' + index">
				<view class="order_header">
					<text>订单：{{ item.ordernumber }}</text>
					<text>{{ item.statusname }}</text>
				</view>
				<view class="order_content">
					<view>教练:{{ item.coachname }}</view>
					<view class="">
						联系电话:{{item.coachphone}}
					</view>
					<view>科目:{{ item.subjectstitle }}</view>
					<view>预约时间:{{ item.yuyuedate }} {{ item.yuyuetime == 'am' ? '上午' : '下午' }} {{item.starthour+'点-'+item.endhour+'点'}}</view>
				</view>
				<view class="order_peopleNumber" v-if="item.lastnumber">
					<text>{{item.lastnumber}}</text>
				</view>
				<view class="order_footer">
					<text>{{ item.createtime }}</text>
					<view>
						<text>￥</text>
						<text>{{ item.money }}</text>
					</view>
				</view>
				<view class="order_state" v-if="item.cancelstatus || item.commentstatus || item.refundstatus || item.gopaystatus || item.hexiaostatus || item.deletestatus">
					<view @click.stop="deleteHandle(item)" style="border-color: #ff4040;color: #ff4040;" class="order_state_refund" v-if="item.deletestatus">删除订单</view>
					<view @click.stop="cancelHandle(item)" class="order_state_refund" v-if="item.cancelstatus">取消订单</view>
					<view @click.stop="commentHandle(item)" class="order_state_refund" v-if="item.commentstatus">评价</view>
					<view @click.stop="refund(item)" class="order_state_pay" v-if="item.refundstatus">退款</view>
					<view @click.stop="payHandle(item)" class="order_state_pay" v-if="item.gopaystatus">付款</view>
					<view @click.stop="hexiaoHandle(item)" class="order_state_pay" v-if="item.hexiaostatus">
						<image src="../../../static/img/personCenter/QRcode.png" mode=""></image>
						核销码
					</view>
				</view>
			</view>
			<view v-show="current == 2" class="order borderBottom10" @click="orderDetailHandle(item, index)" v-for="(item, index) in list" :key="'c' + index">
				<view class="order_header">
					<text>订单：{{ item.ordernumber }}</text>
					<text>{{ item.statusname }}</text>
				</view>
				<view class="order_content">
					<view>教练:{{ item.coachname }}</view>
					<view class="">
						联系电话:{{item.coachphone}}
					</view>
					<view>科目:{{ item.subjectstitle }}</view>
					<view>预约时间:{{ item.yuyuedate }} {{ item.yuyuetime == 'am' ? '上午' : '下午' }} {{item.starthour+'点-'+item.endhour+'点'}}</view>
				</view>
				<view class="order_peopleNumber" v-if="item.lastnumber">
					<text>{{item.lastnumber}}</text>
				</view>
				<view class="order_footer">
					<text>{{ item.createtime }}</text>
					<view>
						<text>￥</text>
						<text>{{ item.money }}</text>
					</view>
				</view>
				<view class="order_state" v-if="item.cancelstatus || item.commentstatus || item.refundstatus || item.gopaystatus || item.hexiaostatus || item.deletestatus">
					<view @click.stop="deleteHandle(item)" style="border-color: #ff4040;color: #ff4040;" class="order_state_refund" v-if="item.deletestatus">删除订单</view>
					<view @click.stop="cancelHandle(item)" class="order_state_refund" v-if="item.cancelstatus">取消订单</view>
					<view @click.stop="commentHandle(item)" class="order_state_refund" v-if="item.commentstatus">评价</view>
					<view @click.stop="refund(item)" class="order_state_pay" v-if="item.refundstatus">退款</view>
					<view @click.stop="payHandle(item)" class="order_state_pay" v-if="item.gopaystatus">付款</view>
					<view @click.stop="hexiaoHandle(item)" class="order_state_pay" v-if="item.hexiaostatus">
						<image src="../../../static/img/personCenter/QRcode.png" mode=""></image>
						核销码
					</view>
				</view>
			</view>
			<view v-show="current == 3" class="order borderBottom10" @click="orderDetailHandle(item, index)" v-for="(item, index) in list" :key="'d' + index">
				<view class="order_header">
					<text>订单：{{ item.ordernumber }}</text>
					<text>{{ item.statusname }}</text>
				</view>
				<view class="order_content">
					<view>教练:{{ item.coachname }}</view>
					<view class="">
						联系电话:{{item.coachphone}}
					</view>
					<view>科目:{{ item.subjectstitle }}</view>
					<view>预约时间:{{ item.yuyuedate }} {{ item.yuyuetime == 'am' ? '上午' : '下午' }} {{item.starthour+'点-'+item.endhour+'点'}}</view>
				</view>
				<view class="order_peopleNumber" v-if="item.lastnumber">
					<text>{{item.lastnumber}}</text>
				</view>
				<view class="order_footer">
					<text>{{ item.createtime }}</text>
					<view>
						<text>￥</text>
						<text>{{ item.money }}</text>
					</view>
				</view>
				<view class="order_state" v-if="item.cancelstatus || item.commentstatus || item.refundstatus || item.gopaystatus || item.hexiaostatus || item.deletestatus">
					<view @click.stop="deleteHandle(item)" style="border-color: #ff4040;color: #ff4040;" class="order_state_refund" v-if="item.deletestatus">删除订单</view>
					<view @click.stop="cancelHandle(item)" class="order_state_refund" v-if="item.cancelstatus">取消订单</view>
					<view @click.stop="commentHandle(item)" class="order_state_refund" v-if="item.commentstatus">评价</view>
					<view @click.stop="refund(item)" class="order_state_pay" v-if="item.refundstatus">退款</view>
					<view @click.stop="payHandle(item)" class="order_state_pay" v-if="item.gopaystatus">付款</view>
					<view @click.stop="hexiaoHandle(item)" class="order_state_pay" v-if="item.hexiaostatus">
						<image src="../../../static/img/personCenter/QRcode.png" mode=""></image>
						核销码
					</view>
				</view>
			</view>
			<view v-show="current == 4" class="order borderBottom10" @click="orderDetailHandle(item, index)" v-for="(item, index) in list" :key="'e' + index">
				<view class="order_header">
					<text>订单：{{ item.ordernumber }}</text>
					<text>{{ item.statusname }}</text>
				</view>
				<view class="order_content">
					<view>教练:{{ item.coachname }}</view>
					<view class="">
						联系电话:{{item.coachphone}}
					</view>
					<view>科目:{{ item.subjectstitle }}</view>
					<view>预约时间:{{ item.yuyuedate }} {{ item.yuyuetime == 'am' ? '上午' : '下午' }} {{item.starthour+'点-'+item.endhour+'点'}}</view>
				</view>
				<view class="order_footer">
					<text>{{ item.createtime }}</text>
					<view>
						<text>￥</text>
						<text>{{ item.money }}</text>
					</view>
				</view>
				<view class="order_state" v-if="item.cancelstatus || item.commentstatus || item.refundstatus || item.gopaystatus || item.hexiaostatus || item.deletestatus">
					<view @click.stop="deleteHandle(item)" style="border-color: #ff4040;color: #ff4040;" class="order_state_refund" v-if="item.deletestatus">删除订单</view>
					<view @click.stop="cancelHandle(item)" class="order_state_refund" v-if="item.cancelstatus">取消订单</view>
					<view @click.stop="commentHandle(item)" class="order_state_refund" v-if="item.commentstatus">评价</view>
					<view @click.stop="refund(item)" class="order_state_pay" v-if="item.refundstatus">退款</view>
					<view @click.stop="payHandle(item)" class="order_state_pay" v-if="item.gopaystatus">付款</view>
					<view @click.stop="hexiaoHandle(item)" class="order_state_pay" v-if="item.hexiaostatus">
						<image src="../../../static/img/personCenter/QRcode.png" mode=""></image>
						核销码
					</view>
				</view>
			</view>
			<view v-show="current == 5" class="order borderBottom10" @click="orderDetailHandle(item, index)" v-for="(item, index) in list" :key="'f' + index">
				<view class="order_header">
					<text>订单：{{ item.ordernumber }}</text>
					<text>{{ item.statusname }}</text>
				</view>
				<view class="order_content">
					<view>教练:{{ item.coachname }}</view>
					<view class="">
						联系电话:{{item.coachphone}}
					</view>
					<view>科目:{{ item.subjectstitle }}</view>
					<view>预约时间:{{ item.yuyuedate }} {{ item.yuyuetime == 'am' ? '上午' : '下午' }} {{item.starthour+'点-'+item.endhour+'点'}}</view>
				</view>
				<view class="order_footer">
					<text>{{ item.createtime }}</text>
					<view>
						<text>￥</text>
						<text>{{ item.money }}</text>
					</view>
				</view>
				<view class="order_state" v-if="item.cancelstatus || item.commentstatus || item.refundstatus || item.gopaystatus || item.hexiaostatus || item.deletestatus">
					<view @click.stop="deleteHandle(item)" style="border-color: #ff4040;color: #ff4040;" class="order_state_refund" v-if="item.deletestatus">删除订单</view>
					<view @click.stop="cancelHandle(item)" class="order_state_refund" v-if="item.cancelstatus">取消订单</view>
					<view @click.stop="commentHandle(item)" class="order_state_refund" v-if="item.commentstatus">评价</view>
					<view @click.stop="refund(item)" class="order_state_pay" v-if="item.refundstatus">退款</view>
					<view @click.stop="payHandle(item)" class="order_state_pay" v-if="item.gopaystatus">付款</view>
					<view @click.stop="hexiaoHandle(item)" class="order_state_pay" v-if="item.hexiaostatus">
						<image src="../../../static/img/personCenter/QRcode.png" mode=""></image>
						核销码
					</view>
				</view>
			</view>
		</view>
		<view v-show="loadingShow" class="loading">{{loadingText}}</view>
		<uni-popup ref="popup" type="center" @change="popupHandle">
			<view class="popup_content" style="position: relative;">
				<view class="" @click="refreshHandle" style="position: absolute;right: 20rpx;top: 20rpx;"><u-icon name="close" color="#ff4040" size="32"></u-icon></view>

				<view class="popup_content_title">请将二维码出示给核销员</view>
				<image :src="hexiaoImg" mode=""></image>
				<view class="popup_content_tips">温馨提示：为了更好的保护您利益，请不要轻易将您的核销二维码泄露给他人</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import url from '@/tool/index.js';
import { order, hxerweima, comment, cancelorder, refundorder, delorder } from '@/api/user/myOrder/testOrder.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: { uniPopup },
	data() {
		return {
			current: 0,
			orderFlag: true,
			tabs: [
				'全部', //0
				'待付款', //1
				'待使用', //2
				'已完成', //3
				'已取消', //4
				'退款'
			],
			list: [
				// {
				// 	order: 45655645565,
				// 	teacher: '张三',
				// 	lesson: '科目二',
				// 	time: '2019-10-28  上午',
				// 	roundNumer: 1,
				// 	date: '2019-05-24  14:30:12',
				// 	state: 1,
				// 	price: 60.0
				// },
			],
			hexiaoImg: '',
			page:1,
			loadingText: '加载中...', //加载状态
			loadingShow:true,
		};
	},
	async onShow() {
		let res = await order(this.current);
		this.getOrderList(res)
	},
	onReachBottom() {
		this.loadMore()
	},
	watch: {
		list(val) {
			if (!this.list.length) {
				this.orderFlag = true;
			} else {
				this.orderFlag = false;
			}
		}
	},
	methods: {
		async loadMore(){
			let res = await order(this.current,++this.page);
			this.getOrderList(res)
		},
		getOrderList(res){
			if (res.data.data.length == 0) {
				this.loadingText = "没有数据了！";
			} else if (res.data.data.length < 10) {
				this.loadingText = "没有数据了！";
			} else {
				this.loadingText = "加载中";
			}
			if (this.page == 1) {
				this.list = res.data.data;
			} else {
				this.list = this.list.concat(res.data.data)
			}
			if(this.list.length>0){
				this.loadingShow=true
			}else{
				this.loadingShow=false
			}
		},
		//选项卡
		async selectd(index) {
			this.page=1
			uni.showLoading({
				title: '加载中'
			});
			let res = await order(index,1);
			this.getOrderList(res)
			uni.hideLoading();
			this.current = index;
		},
		orderHandle(item) {},
		//取消订单
		cancelHandle(item) {
			uni.showModal({
				title: '提示',
				content: '确定要取消订单吗？',
				success: async res => {
					if (res.confirm) {
						let data = await cancelorder(item.ordernumber);
						if (data.msg == 'success') {
							uni.showToast({
								title: '取消成功！'
							});
							this.getList();
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//评价订单
		commentHandle(item) {
			uni.navigateTo({
				url: '/pages/tabbar/personCenter/evaluate?type=2&id=' + item.id
			});
		},
		//核销码
		async hexiaoHandle(item) {
			let res = await hxerweima(item.id);
			if (res.msg == 'success') {
				this.hexiaoImg = res.data.hxerweima;
				this.$refs.popup.open();
			} else {
				uni.showToast({
					title: '获取二维码失败，请重试',
					icon: 'none'
				});
			}
		},
		async popupHandle(e) {
			if (e.show === false) {
				uni.showLoading({
					title: '加载中'
				});
				let res = await order(this.current);
				this.getOrderList(res)
				uni.hideLoading();
			}
		},
		async refreshHandle() {
			this.$refs.popup.close();
		},
		//订单支付
		payHandle(item) {
			uni.navigateTo({
				url: '/pages/order/order?type=2&orderNumber=' + item.ordernumber + '&id=' + item.id
			});
		},
		//订单详情
		orderDetailHandle(item, index) {
			uni.navigateTo({
				url: '/pages/tabbar/personCenter/orderDetail?type=2&id=' + item.id
			});
		},
		//订单退款
		async refund(item) {
			let res = await refundorder(item.ordernumber);
			if (res.msg == 'success') {
				uni.showToast({
					title: '已提交申请'
				});
				this.getList();
			} else {
				uni.showToast({
					title: '退款失败，请重试！',
					icon: 'none'
				});
			}
		},
		//删除订单
		async deleteHandle(item) {
			let res = await delorder(item.ordernumber);
			if (res.msg == 'success') {
				uni.showToast({
					title: '删除成功'
				});
				this.getList();
			} else {
				uni.showToast({
					title: '删除失败，请重试！',
					icon: 'none'
				});
			}
		},
		async getList() {
			let res = await order(this.current);
			this.list = res.data.data;
			if(this.list.length>0){
				this.loadingShow=true
			}else{
				this.loadingShow=false
			}
		}
	}
};
</script>

<style lang="scss">
@import './css/userOrder.scss';
</style>
